<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('./员工图片/bg2.jpg') no-repeat center;
            background-size: 100%;
        }

        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        #pox {
            width: 200px;
            height: 60px;
            background-color: rgb(255, 255, 255);
            margin: 100px auto;
            border-radius: 20px;
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            cursor: pointer;
        }

        #box {
            width: 500px;
            height: 500px;
            /* background: url('../../员工图片/卡修斯.jpg') no-repeat center ; */
            background: radial-gradient(circle, rgb(15, 255, 255), rgb(191, 255, 1), rgb(255, 255, 255), rgb(191, 250, 82));
            margin: auto;
            border-radius: 50%;
            position: relative;
        }

        img {
            position: absolute;
            left: 18%;
            top: 17%;
            z-index: 999;
            border-radius: 50%;

        }
    </style>
</head>

<body>
    <div id="pox">
        点我抽奖
    </div>
    <div id="box">
        <ul id="baba">
            <img src="./1/王兆庆共商服安检(2).jpg" alt="">
        </ul>
    </div>
    <script>
        var photos = [

            "./1/居民安检-张韦(1).jpg",
            "./1/张辉工商服安检(1).jpg",
            "./1/郑安应工商服安检(1).jpg",
            "./员工图片/曹云峰(1).jpg",
            "./员工图片/青龙.jpg",
			"./1/王兆庆共商服安检(2).jpg",
        ]
/**320  338****/

        var time
        // 给按钮绑定事件 然后点击按钮图片索引随机数改变
        pox.onclick = function () {


            if (!time) {
                clearInterval(time)
                // 定义一个定时器点击事件定时器运行
                time = setInterval(function () {

                    // 存放图片存字符串
                    var str = ''

                    var num = Math.floor(Math.random() * photos.length)

                    str += `<img src='${photos[num]}' alt="">`

                    // 获取按钮
                    var pox = document.querySelector('#pox')

                    // 将随机出来的图片放在定时器中
                    baba.innerHTML = str
                    pox.innerText = '点我抽奖'

                }, 1)
            } else {
                pox.innerText = '中奖啦!'
                clearInterval(time)
                time = null
            }
        }

    </script>
</body>

</html>